<template>
  <view class="pageHeight wh_750 bg_F5F5F5 flex flex-column align-center">
    <s-header-title title="册谱管理" is-fixed background="#FFFFFF" is-display-back
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${page.height}px`}"></view>
    <view class="hW_20"></view>
    <gapbar title="册谱名称" @elementClick="openTitlePopup">
      <template v-slot:content>
        <view class="content">
          {{ page.genealogicalInformation.title }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="主编人" @elementClick="openEditorPopup">
      <template v-slot:content>
        <view class="content">
          {{ page.genealogicalInformation.editor }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="堂号" @elementClick="openHallPopup">
      <template v-slot:content>
        <view class="content">
          {{ page.genealogicalInformation.hall_num }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="支系" @elementClick="openBranchPopup">
      <template v-slot:content>
        <view class="content">
          {{ page.genealogicalInformation.branch }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="编谱地址" @elementClick="openAreaPopup">
      <template v-slot:content>
        <view class="content flex align-end flex-column">
          <view v-if="page.genealogicalInformation.area">
            {{ page.genealogicalInformation.area.split('-').join('/') }}
          </view>
          <view class="wh_380"
                style="text-align: end;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
            {{ page.genealogicalInformation.area_address }}
          </view>
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="编谱日期" @elementClick="setCompilationDate">
      <template v-slot:content>
        <view class="content" v-if=" page.genealogicalInformation.full_year">
          {{ page.genealogicalInformation.full_year.gregorian_date }}
          {{ page.genealogicalInformation.full_year.ganzhi_year }}年{{ page.genealogicalInformation.full_year.lunar_date
          }}
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="封面图"
            @elementClick="sheep.$router.go('/pages/canonization/cover',{id: page.options.id,cover_image:page.genealogicalInformation.cover_image})">
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="内容背景"
            @elementClick="sheep.$router.go('/pages/canonization/background',{id: page.options.id,back_image:page.genealogicalInformation.back_image})">
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="世系表" @elementClick="sheep.$router.go('/pages/canonization/genealogy',{id: page.options.id})">
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="页眉" @elementClick="sheep.$router.go('/pages/canonization/pageHeader',{id: page.options.id})">
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="目录管理" @elementClick="directoryManagement"></gapbar>
    <view class="hW_20"></view>
    <gapbar title="导出" @elementClick="derive(0)"></gapbar>
    <view class="hW_50"></view>
    <!-- 修改册谱名称 -->
    <s-first-popup ref="titlePopup" @closePopup="page.suernameFocus = false">
      <template #content>
        <view class="familyMemberPopUp allColumnCenter">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改册谱名称
            </view>
          </view>
          <image class="familyMemberPopUp_icon z-1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="page.titleName"
                     :placeholder="!!page.genealogicalInformation.title ? page.genealogicalInformation.title : '请输入册谱名称'"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" :focus="page.surnameFocus">
            </view>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 修改主编人名称 -->
    <s-first-popup ref="editorPopup" @closePopup="page.editorFocus = false">
      <template #content>
        <view class="familyMemberPopUp allColumnCenter">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改主编人名称
            </view>
          </view>
          <image class="familyMemberPopUp_icon z-1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="page.editorName"
                     :placeholder="!!page.genealogicalInformation.editor ? page.genealogicalInformation.editor : '请输入主编人名称'"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" :focus="page.editorFocus">
            </view>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 修改堂号名称 -->
    <s-first-popup ref="hallPopup" @closePopup="page.hallFocus = false">
      <template #content>
        <view class="familyMemberPopUp allColumnCenter">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改堂号名称
            </view>
          </view>
          <image class="familyMemberPopUp_icon z-1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="page.hallName"
                     :placeholder="!!page.genealogicalInformation.hall_num ? page.genealogicalInformation.hall_num : '请输入堂号名称'"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" :focus="page.hallFocus">
            </view>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 修改支系名称 -->
    <s-first-popup ref="branchPopup" @closePopup="page.branchFocus = false">
      <template #content>
        <view class="familyMemberPopUp allColumnCenter">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改支系名称
            </view>
          </view>
          <image class="familyMemberPopUp_icon z-1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="page.branchName"
                     :placeholder="!!page.genealogicalInformation.branch ? page.genealogicalInformation.branch : '请输入支系名称'"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" :focus="page.branchFocus">
            </view>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 编谱地址 -->
    <su-region-picker title="编谱地址" :show="page.areaDisplay" @cancel="page.areaDisplay = false"
                      @confirm="onAddressConfirm"></su-region-picker>
    <!-- 编谱日期 -->
    <s-better-calendar class="z-999" ref="betterCalendarRef" :maxYear="new Date().getFullYear()"
                       :default-type="page.type" :default-value="page.defaultValue" :showCalendar="page.showCalendar"
                       @confirm="selectDate" @cancel="page.showCalendar = false"></s-better-calendar>
    <canvas canvas-id="myCanvas"
            style="width: 375px;height: 667px;position: fixed;top: -9999999999px;left: 50%;transform: translate(-50%,-50%);z-index:9999999999;"></canvas>
    <!-- #ifdef APP-PLUS -->
    <pdfManage :imageList="page.imageList"></pdfManage>
    <!-- #endif -->
  </view>
</template>

<script setup>
  // #ifdef H5
  import {
    jsPDF,
  } from 'jspdf';
  // #endif
  // #ifdef APP-PLUS
  import { pathToBase64 } from 'image-tools';
  // #endif
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import {
    reactive,
    ref,
    computed,
  } from 'vue';
  import Gapbar from '@/pages/canonization/components/gapbar.vue';
  import {
    onLoad,
    onShow,
    onUnload,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';
  import SFirstPopup from '@/sheep/components/s-first-popup/s-first-popup.vue';
  import SuRegionPicker from '@/sheep/ui/su-region-picker/su-region-picker.vue';
  import SBetterCalendar from '@/sheep/components/s-better-calendar/s-better-calendar.vue';
  import {
    calendar,
  } from '@/sheep/components/s-better-calendar/calendar';
  import {
    baseUrl,
  } from '@/sheep/config';
  import pdfManage from './components/pdfManage.vue';
  import permision from '@/uni_modules/all-speech/js_sdk/wa-permission/permission';

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const betterCalendarRef = ref();
  const INIT_DAY_TYPE = 'solar';
  const INIT_DAY_TIMESTAMP = dayjs().valueOf();
  const INIT_DAY = dayjs().format('YYYY-MM-DD');
  const page = reactive({
    options: {},
    height: 0,
    // 册谱信息
    genealogicalInformation: {},
    titleName: '',
    surnameFocus: false,
    editorName: '',
    editorFocus: false,
    hallName: '',
    hallFocus: false,
    branchName: '',
    branchFocus: false,
    // 编谱地址
    areaDisplay: false,
    type: INIT_DAY_TYPE, // 类型
    timestamp: INIT_DAY_TIMESTAMP, // 时间戳
    solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
    lunarDate: '', // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
    lunarDateNumber: '', // 农历生日的数字写法（1999-12-25）
    defaultValue: [100, 0, 0], // 默认选中的日期
    showCalendar: false,
    // 绘制过后的图片列表
    imageList: [],
    webviewValue: 'http://192.168.2.17:9443/#/pages/canonization/manage',
  });
  const titlePopup = ref();
  const editorPopup = ref();
  const hallPopup = ref();
  const branchPopup = ref();
  const ctx = reactive({
    value: null,
  });
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const userInfo = computed(() => sheep.$store('user').userInfo);

  onLoad((options) => {
    page.options = options;
    sheep.$api.data.area().then((res) => {
      if (res.code === 1) {
        uni.setStorageSync('areaData', res.data);
      }
    });
  });

  onShow(() => {
    getGenealogicalInformation();
  });

  onUnload(() => {
    uni.hideLoading();
  });

  function getPageHeight(height) {
    page.height = height;
  }

  // 获取册谱详情
  async function getGenealogicalInformation() {
    const {
      data,
    } = await sheep.$api.book_list.getUnreadMessage({
      genealogy_id: page.options.id,
    });
    page.genealogicalInformation = data;
  }

  // 修改册谱名称
  async function openTitlePopup() {
    const {
      code,
      msg,
    } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.options.id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    page.titleName = page.genealogicalInformation.title;
    page.surnameFocus = true;
    titlePopup._value.openPopup({
      title: '请输入册谱名称',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        const {
          code,
          msg,
        } = await sheep.$api.book_list.updateBook({
          genealogy_id: page.options.id,
          title: page.titleName,
        });
        if (code == 1) {
          titlePopup._value.closePopup();
          await getGenealogicalInformation();
          uni.$emit('getCanonizationDetail');
        } else {
          sheep.$helper.toast(msg);
        }
      },
    });
  }

  // 修改主编人名称
  async function openEditorPopup() {
    const {
      code,
      msg,
    } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.options.id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    page.editorName = page.genealogicalInformation.editor;
    page.editorFocus = true;
    editorPopup._value.openPopup({
      title: '请输入主编人名称',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        const {
          code,
          msg,
        } = await sheep.$api.book_list.updateBook({
          genealogy_id: page.options.id,
          editor: page.editorName,
        });
        if (code == 1) {
          editorPopup._value.closePopup();
          uni.$emit('getCanonizationDetail');
          await getGenealogicalInformation();
        } else {
          sheep.$helper.toast(msg);
        }
      },
    });
  }

  // 修改堂号名称
  async function openHallPopup() {
    const {
      code,
      msg,
    } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.options.id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    page.hallName = page.genealogicalInformation.hall_num;
    page.hallFocus = true;
    hallPopup._value.openPopup({
      title: '请输入堂号名称',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        const {
          code,
          msg,
        } = await sheep.$api.book_list.updateBook({
          genealogy_id: page.options.id,
          hall_num: page.hallName,
        });
        if (code == 1) {
          hallPopup._value.closePopup();
          uni.$emit('getCanonizationDetail');
          await getGenealogicalInformation();
        } else {
          sheep.$helper.toast(msg);
        }
      },
    });
  }

  async function openBranchPopup() {
    const {
      code,
      msg,
    } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.options.id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    page.branchName = page.genealogicalInformation.branch;
    page.branchFocus = true;
    branchPopup._value.openPopup({
      title: '请输入支系名称',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        const {
          code,
          msg,
        } = await sheep.$api.book_list.updateBook({
          genealogy_id: page.options.id,
          branch: page.branchName,
        });
        if (code == 1) {
          branchPopup._value.closePopup();
          uni.$emit('getCanonizationDetail');
          await getGenealogicalInformation();
        } else {
          sheep.$helper.toast(msg);
        }
      },
    });
  }

  async function openAreaPopup() {
    const {
      code,
      msg,
    } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.options.id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    // page.areaDisplay = true;
    sheep.$router.go('/pages/extend/addressFill', {
      id: page.options.id,
      type: 1,
    });
  }

  async function onAddressConfirm(e) {
    console.log(e);
    const {
      code,
      msg,
    } = await sheep.$api.book_list.updateBook({
      genealogy_id: page.options.id,
      area: e.province_name + '-' + e.city_name + '-' + e.district_name,
    });
    if (code == 1) {
      page.areaDisplay = false;
      await getGenealogicalInformation();
      uni.$emit('getCanonizationDetail');
    } else {
      sheep.$helper.toast(msg);
    }
  }

  async function setCompilationDate() {
    const {
      code,
      msg,
    } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.options.id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    if (page.genealogicalInformation.date_type == 1) {
      let day = calendar.leapMonth(Number(page.genealogicalInformation.full_year.lunar.split('-')[0]));
      if (!!page.genealogicalInformation.full_year.is_leap) {
        let arr = [];
        arr[0] = Number(page.genealogicalInformation.full_year.lunar.split('-')[0]) - 1900;
        arr[1] = Number(page.genealogicalInformation.full_year.lunar.split('-')[1]);
        arr[2] = Number(page.genealogicalInformation.full_year.lunar.split('-')[2]) - 1;
        betterCalendarRef.value.setPicker(arr, 'lunar', page.genealogicalInformation.full_year.is_leap);
      } else {
        if (day <= 0) {
          let arr = [];
          arr[0] = Number(page.genealogicalInformation.full_year.lunar.split('-')[0]) - 1900;
          arr[1] = Number(page.genealogicalInformation.full_year.lunar.split('-')[1]) - 1;
          arr[2] = Number(page.genealogicalInformation.full_year.lunar.split('-')[2]) - 1;
          betterCalendarRef.value.setPicker(arr, 'lunar', page.genealogicalInformation.full_year.is_leap);
        } else {
          if (Number(page.genealogicalInformation.full_year.lunar.split('-')[1]) > day) {
            let arr = [];
            arr[0] = Number(page.genealogicalInformation.full_year.lunar.split('-')[0]) - 1900;
            arr[1] = Number(page.genealogicalInformation.full_year.lunar.split('-')[1]);
            arr[2] = Number(page.genealogicalInformation.full_year.lunar.split('-')[2]) - 1;
            betterCalendarRef.value.setPicker(arr, 'lunar', page.genealogicalInformation.full_year
              .is_leap);
          } else {
            if (page.genealogicalInformation.full_year.is_leap) {
              console.log(1);
              let arr = [];
              arr[0] = Number(page.genealogicalInformation.full_year.lunar.split('-')[0]) - 1900;
              arr[1] = Number(page.genealogicalInformation.full_year.lunar.split('-')[1]);
              arr[2] = Number(page.genealogicalInformation.full_year.lunar.split('-')[2]) - 1;
              betterCalendarRef.value.setPicker(arr, 'lunar', page.genealogicalInformation.full_year
                .is_leap);
            } else {
              let arr = [];
              arr[0] = Number(page.genealogicalInformation.full_year.lunar.split('-')[0]) - 1900;
              arr[1] = Number(page.genealogicalInformation.full_year.lunar.split('-')[1]) - 1;
              arr[2] = Number(page.genealogicalInformation.full_year.lunar.split('-')[2]) - 1;
              betterCalendarRef.value.setPicker(arr, 'lunar', page.genealogicalInformation.full_year
                .is_leap);
            }
          }

        }
      }
    } else {
      let defaultValue = [];
      defaultValue[0] = page.genealogicalInformation.full_year.gregorian_year.split('-')[0] - 1900;
      defaultValue[1] = page.genealogicalInformation.full_year.gregorian_year.split('-')[1] - 1;
      defaultValue[2] = page.genealogicalInformation.full_year.gregorian_year.split('-')[2] - 1;
      betterCalendarRef.value.setPicker(defaultValue, 'solar', page.genealogicalInformation.full_year.is_leap);
    }
    page.showCalendar = true;
  }

  async function selectDate(e) {
    const {
      code,
      msg,
    } = await sheep.$api.book_list.updateBook({
      genealogy_id: page.options.id,
      createtime: e.type == 'solar' ? e.solarDate : e.lunarDateNumber,
      date_type: e.type == 'solar' ? 2 : 1,
      isLeapMonth: e.isLeap ? 2 : 1,
    });
    if (code == 1) {
      page.showCalendar = false;
      uni.$emit('getCanonizationDetail');
      await getGenealogicalInformation();
    } else {
      sheep.$helper.toast(msg);
    }
  }

  async function directoryManagement() {
    const {
      code,
      msg,
    } = await sheep.$api.genealogy.checkAuth({
      genealogy_id: page.options.id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    sheep.$router.go('/pages/canonization/directoryManagement', {
      id: page.options.id,
    });
  }

  async function derive(index = 0) {
    sheep.$router.go('/pages/public/richtext', {
      id: 15,
      title: '导出',
      genealogy_id: page.options.id,
    });
    return;
    // #ifdef APP-PLUS
    let platform = uni.getSystemInfoSync().platform;
    if (platform == 'android') {
      uni.showModal({
        title: '提示',
        content: '需要您开启储存权限，才能导出并下载PDF',
        success: async (res) => {
          if (res.confirm) {
            const limitsOfAuthority = await permision.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');
            if (limitsOfAuthority == 1) {
              ctx.value = uni.createCanvasContext('myCanvas');
              await drawImage(index);
            } else {
              sheep.$helper.toast('请开启储存权限');
              setTimeout(() => {
                permision.gotoAppPermissionSetting();
              }, 1500);
            }
          }
        },
      });
    } else {
      ctx.value = uni.createCanvasContext('myCanvas');
      await drawImage(index);
    }
    // #endif
    // #ifdef H5
    ctx.value = uni.createCanvasContext('myCanvas');
    await drawImage(index);
    // #endif
  }

  async function drawImage(index = 0) {
    uni.showLoading({
      title: `正在绘制第${index}张照片`,
      mask: true,
    });
    if (index == 0) {
      // 绘制背景
      await drawBackground();
      let coverImage = await getImageInfo({
        imgSrc: page.genealogicalInformation.cover_image_url.indexOf('http') != -1 ? page
            .genealogicalInformation.cover_image_url :
          `${nc_image.value}${page.genealogicalInformation.cover_image_url}`,
      });
      await ctx.value.drawImage(coverImage.path, 0, 0, 375, 667);
      await ctx.value.save();
      await drawRect(128, 96, 192, 445, '#FFFFFF');
      await drawRoundRectPath(138, 106, 172, 425, 2, '#000000', '#FFFFFF');
      await drawRoundRectPath(143, 111, 32, 326, 1, '#000000', '#FFFFFF');
      await drawRoundRectPath(178, 111, 92, 326, 1, '#000000', '#FFFFFF');
      await drawRoundRectPath(273, 111, 32, 326, 1, '#000000', '#FFFFFF');
      await drawRoundRectPath(143, 440, 162, 85, 1, '#000000', '#FFFFFF');
      await drawText(page.genealogicalInformation.hall_num, 158, 128, 13, 85, '#42403C', '13', '500', 'center');
      await drawTextVertical(`主编人·${page.genealogicalInformation.editor}`, 158, 430, 13, 85, '#42403C', '13',
        '500', 'center');
      await drawTextCenter(`${page.genealogicalInformation.title}`, 225, 161, 13, 256, '#42403C', '52', '500',
        'center');
      await drawTextVertical(`创建日期·${number2Chinese(page.genealogicalInformation.full_year.gregorian_date)}`,
        290, 430, 13, 85, '#42403C', '13', '500', 'center');
      let backgroundImage = await getImageInfo({
        imgSrc: `${sheep.$store('AI').sq_image_path}/index/canonization_cover_background.png`,
      });
      await ctx.value.drawImage(backgroundImage.path, 145, 442, 160, 83);
      ctx.value.draw(true, async () => {
        // 保存图片
        let {
          fullurl,
        } = await saveImage();
        page.imageList.push(fullurl);
        await drawImage(index + 1);
      });
    } else {
      if (index <= page.genealogicalInformation.totalPages) {
        // if (index <= 25) {
        await drawBackground();
        // let coverImage = await getImageInfo({
        //   imgSrc: page.genealogicalInformation.background_image_url.indexOf('http') != -1 ? page
        //       .genealogicalInformation.background_image_url :
        //     `${nc_image.value}${page.genealogicalInformation.background_image_url}`,
        // });
        // await ctx.value.drawImage(coverImage.path, 0, 0, 375, 667);
        await drawRoundRectPath(10, 69.5, 354, 528, 2, '#000000', 'transparent');
        // let cornerMark = await getImageInfo({
        //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/cornerMark.png`,
        // });
        // await ctx.value.drawImage(cornerMark.path, 9, 68.5, 40, 43);
        // let cornerMark1 = await getImageInfo({
        //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/cornerMark2.png`,
        // });
        // await ctx.value.drawImage(cornerMark1.path, 325, 68.5, 40, 43);
        // let cornerMark2 = await getImageInfo({
        //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/cornerMark3.png`,
        // });
        // await ctx.value.drawImage(cornerMark2.path, 9, 555.55, 40, 43);
        // let cornerMark3 = await getImageInfo({
        //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/cornerMark4.png`,
        // });
        // await ctx.value.drawImage(cornerMark3.path, 325, 555.55, 40, 43);
        await drawRect(325, 68.5, 2, 530, '#000000');
        await drawText(page.genealogicalInformation.title, 345, 125, 13, 256, '#000000', setFontSize(page
          .genealogicalInformation.title), '500', 'center');
        await drawRect(326, 300, 38, 2, '#000000');
        await drawRect(326, 307, 38, 8, '#000000');
        await drawText(page.genealogicalInformation.branch, 345, 345, 13, 256, '#000000', setFontSize(page
          .genealogicalInformation.branch), '500', 'center');
        await drawRect(326, 400, 38, 2, '#000000');
        await drawRect(326, 407, 38, 8, '#000000');
        await drawText(page.genealogicalInformation.hall_num, 345, 445, 13, 256, '#000000', setFontSize(page
          .genealogicalInformation.hall_num), '500', 'center');
        await drawRect(326, 500, 38, 2, '#000000');
        await drawRect(326, 507, 38, 8, '#000000');
        let {
          data,
        } = await sheep.$api.book_list.getBookPage({
          genealogy_id: page.options.id,
          page: index,
        });
        await drawTextLandscapeOrientation(data.page, 345, 562, 13, 256, '#000000', '15', '500', 'center');
        if (data.sys_id != 2 && data.sys_id != 3) {
          let jiapu_background_bg = await getImageInfo({
            imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/jiapu_background_bg.png`,
          });
          await ctx.value.drawImage(jiapu_background_bg.path, 128, 75, 116, 27);
          await drawTextLandscapeOrientation(`${data.cate_title}`, 187.5, 95, 13, 256, '#000000', '15',
            '500', 'center');
        }
        if (data.desc == 1 && data.sys_id == 0) {
          data.content.forEach((item, index) => {
            drawHorizontalLine(42 + item.title.length * 13, 128 + index * 28, 242 - item.title
              .length * 13, 0, '#000000', 1, 5 + item.title.length * 2, 6);
            drawTextLandscapeOrientation(item.title, 40, 132 + index * 28, 13, 256, '#000000',
              '13', '500', 'left');
            drawTextLandscapeOrientation(item.page, 300, 132 + index * 28, 13, 256, '#000000',
              '13', '500', 'right');
          });
        }
        if (data.desc == 'cate' && data.sys_id == 1) {
          await drawRect(115, 115.5, 2, 455, '#BF8257');
          await drawRect(225, 115.5, 2, 455, '#BF8257');
          data.content.forEach((item, index) => {
            if ((index + 1) / 21 <= 1) {
              if (item.desc == 'title') {
                drawRect(20, 115.5 + index * 22, 84, 20, '#FF4206');
                drawTextItem(item.title, 60, 129.5 + index * 22, '#FFFFFF', 13, '500',
                  'center');
              }
              if (item.desc == 'shi') {
                drawTextItem(item.title, 22, 129.5 + index * 22, '#000000', 13, '500', 'left');
                drawTextItem(item.page, 100, 129.5 + index * 22, '#000000', 13, '500',
                  'right');
              }
              if (item.desc == 'people') {
                drawTextItem(item.name, 22, 129.5 + index * 22, '#000000', 13, '500', 'left');
                drawTextItem(item.page, 100, 129.5 + index * 22, '#000000', 13, '500',
                  'right');
              }
            } else if ((index + 1) / 21 <= 2) {
              if (item.desc == 'title') {
                drawRect(130, 115.5 + (index - 21) * 22, 84, 20, '#FF4206');
                drawTextItem(item.title, 172, 129.5 + (index - 21) * 22, '#FFFFFF', 13, '500',
                  'center');
              }
              if (item.desc == 'shi') {
                drawTextItem(item.title, 130, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                  'left');
                drawTextItem(item.page, 212, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                  'right');
              }
              if (item.desc == 'people') {
                drawTextItem(item.name, 130, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                  'left');
                drawTextItem(item.page, 212, 129.5 + (index - 21) * 22, '#000000', 13, '500',
                  'right');
              }
            } else if ((index + 1) / 21 <= 3) {
              if (item.desc == 'title') {
                drawRect(235, 115.5 + (index - 42) * 22, 84, 20, '#FF4206');
                drawTextItem(item.title, 276, 129.5 + (index - 42) * 22, '#FFFFFF', 13, '500',
                  'center');
              }
              if (item.desc == 'shi') {
                drawTextItem(item.title, 235, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                  'left');
                drawTextItem(item.page, 318, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                  'right');
              }
              if (item.desc == 'people') {
                drawTextItem(item.name, 235, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                  'left');
                drawTextItem(item.page, 318, 129.5 + (index - 42) * 22, '#000000', 13, '500',
                  'right');
              }
            }
          });
        }
        if (data.desc == 'cate' && data.sys_id == 2) {
          await drawRectangle(130, 200, 76, 10, '#000000', 5);
          await drawRoundRectPath(130, 215, 76, 158, 2, '#000000', 'transparent');
          await drawText('照片墙', 169, 270, 13, 256, '#000000', '33', '500', 'center');
        }
        if (data.desc == 'cate' && data.sys_id == 3) {
          await drawRectangle(130, 200, 76, 10, '#000000', 5);
          await drawRoundRectPath(130, 215, 76, 158, 2, '#000000', 'transparent');
          await drawText('世系表', 169, 270, 13, 256, '#000000', '33', '500', 'center');
        }
        if (data.desc == 'content' && data.sys_id == 2) {
          if (data.type == 1) {
            for (let index = 0; index < data.content.length; index++) {
              if ((index + 1) / 3 <= 1) {
                await drawRect(28 + index * 96, 110, 92, 111, 'rgba(255,255,255,0.34)');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                    index].image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width > res.height) {
                  await ctx.value.drawImage(res.path, 28 + index * 96, 110 + (111 - (res.height / res
                    .width) * 92) / 2, 92, (res.height / res.width) * 92);
                } else {
                  let scale = 667 / 375;
                  await ctx.value.drawImage(res.path, 28 + (index) * 96 + (92 - (res.width / res
                    .height) * 111) / 2, 92, (res.width / res.height) * 111, 111);
                }
              }
              if ((index + 1) / 3 > 1 && (index + 1) / 3 <= 2) {
                await drawRect(28 + (index - 3) * 96, 225, 92, 111, 'rgba(255,255,255,0.34)');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                    index].image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width > res.height) {
                  await ctx.value.drawImage(res.path, 28 + (index - 3) * 96, 225 + (111 - (res
                    .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                } else {
                  await ctx.value.drawImage(res.path, 28 + (index - 3) * 96 + (92 - (res.width / res
                    .height) * 111) / 2, 225, (res.width / res.height) * 111, 111);
                }
              }
              if ((index + 1) / 3 > 2 && (index + 1) / 3 <= 3) {
                await drawRect(28 + (index - 6) * 96, 340, 92, 111, 'rgba(255,255,255,0.34)');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                    index].image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width > res.height) {
                  await ctx.value.drawImage(res.path, 28 + (index - 6) * 96, 340 + (111 - (res
                    .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                } else {
                  await ctx.value.drawImage(res.path, 28 + (index - 6) * 96 + (92 - (res.width / res
                    .height) * 111) / 2, 340, (res.width / res.height) * 111, 111);
                }
              }
              if ((index + 1) / 3 > 3 && (index + 1) / 3 <= 4) {
                await drawRect(28 + (index - 9) * 96, 455, 92, 111, 'rgba(255,255,255,0.34)');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                    index].image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width > res.height) {
                  await ctx.value.drawImage(res.path, 28 + (index - 9) * 96, 455 + (111 - (res
                    .height / res.width) * 92) / 2, 92, (res.height / res.width) * 92);
                } else {
                  await ctx.value.drawImage(res.path, 28 + (index - 9) * 96 + (92 - (res.width / res
                    .height) * 111) / 2, 455, (res.width / res.height) * 111, 111);
                }
              }
            }
          } else {
            for (let index = 0; index < data.content.length; index++) {
              await drawRect(28, 95, 280, 470, 'rgba(255,255,255,1)');
              let res = await getImageInfo({
                imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                  .image : `${nc_image.value}${data.content[index].image}`,
              });
              if (res.width > res.height) {
                await ctx.value.drawImage(res.path, 28, 95 + (470 - (res.height / res.width) * 280) /
                  2, 280, (res.height / res.width) * 280);
              } else {
                let scale = 667 / 375;
                await ctx.value.drawImage(res.path, 28 + (280 - (res.width / res.height) * 470) / 2,
                  95, (res.width / res.height) * 470, 470);
              }
            }
          }
        }
        if (data.desc == 'content' && data.sys_id == 3) {
          for (let index = 0; index < data.content.length; index++) {
            await drawRoundRectPath(28, 85 + index * 250, 290, 245, 2, '#000000', 'transparent');
            await drawLine(81, 85 + index * 250, 1, 204, '#000000');
            await drawLine(174, 85 + index * 250, 1, 204, '#000000');
            await drawLine(266, 85 + index * 250, 1, 245, '#000000');
            await drawLine(28, 235 + index * 250, 53, 1, '#000000');
            await drawLine(28, 262 + index * 250, 239, 1, '#000000');
            await drawLine(28, 289 + index * 250, 239, 1, '#000000');
            await drawLine(82, 115 + index * 250, 236, 1, '#000000');
            await drawLine(82, 146 + index * 250, 184, 1, '#000000');
            await drawLine(266, 192 + index * 250, 52, 1, '#000000');
            await drawLine(266, 218 + index * 250, 52, 1, '#000000');
            await drawTextHeight(data.content[index].shi_cn, 45, 100 + index * 250, 184, 150, '#000000',
              15, '500', 'center');
            await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, 62, 100 + index * 250, 184, 150,
              '#000000', 15, '500', 'center');
            await drawTextLandscapeOrientation('姓名', 127, 105 + index * 250, 184, 150, '#696969', 15,
              '500', 'center');
            await drawTextLandscapeOrientation(data.content[index].name || '', 127, 135 + index * 250, 184,
              150, '#000000', 13, '500', 'center');
            await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                .birthday).format('YYYY年MM月DD日') : '', 127, 275 + index * 250, 184, 150, '#000000',
              8, '500', 'center');
            await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
              .lunar_birthday : '', 127, 286 + index * 250, 184, 150, '#000000', 8, '500', 'center');
            await drawTextLandscapeOrientation(data.content[index].brother_desc || '', 55, 252 + index *
              250, 184, 150, '#000000', 8, '500', 'center');
            await drawTextLandscapeOrientation(data.content[index].level_desc || '', 55, 280 + index * 250,
              184, 150, '#000000', 8, '500', 'center');
            await drawTextLandscapeOrientation('配偶', 222, 105 + index * 250, 184, 150, '#696969', 15,
              '500', 'center');
            await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                index].qz_birthday).format('YYYY年MM月DD日') : '', 222, 275 + index * 250, 184, 150,
              '#000000', 8, '500', 'center');
            await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                index].qz_lunar_birthday : '', 222, 286 + index * 250, 184, 150, '#000000', 8,
              '500', 'center');
            await drawTextLandscapeOrientation(data.content[index].qz_name || '', 222, 135 + index * 250,
              184, 150, '#000000', 13, '500', 'center');
            await drawTextLandscapeOrientation('父母', 292, 105 + index * 250, 184, 150, '#696969', 15,
              '500', 'center');
            for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
              await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                .content[index].parents[index1].name, 292, 145 + index * 250 + index1 * 15, 184,
                150, '#000000', 13, '500', 'center');
            }
            await drawTextLandscapeOrientation('子女', 292, 212 + index * 250, 184, 150, '#696969', 15,
              '500', 'center');
            for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
              await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                .content[index].children[index1].name, 292, 237 + index * 250 + index1 * 15, 184,
                150, '#000000', 13, '500', 'center');
            }
            if (!!data.content[index].remark) {
              // let text = data.content[index].remark.split('\n');
              let nextStart = 300 + index * 250;
              // text.forEach(item => {
              nextStart = fillFeedText({
                text: data.content[index].remark,
                x: 35,
                y: nextStart,
                maxWidth: 220,
                lineHeight: 12,
                color: '#000000',
                size: 10,
                maxLineNumber: 3,
                isMax: true,
              });
              // });
            }
            // await drawRect(83, 148, 90, 113, '#BF8257');
            if (data.content[index].image) {
              let imageInPerson = await getImageInfo({
                imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                  .image : `${nc_image.value}${data.content[index].image}`,
              });
              console.log(imageInPerson);
              if (imageInPerson.width > imageInPerson.height) {
                let scale = imageInPerson.width / imageInPerson.height;
                await ctx.value.drawImage(imageInPerson.path, 83, 148 + (113 - 90 / scale) / 2 +
                  index * 250, 90, 90 / scale);
              } else {
                let scale = imageInPerson.height / imageInPerson.width;
                await ctx.value.drawImage(imageInPerson.path, 83 + (90 - 113 / scale) / 2, 148 +
                  index * 250, 113 / scale, 113);
              }
            }
            if (data.content[index].qz_image) {
              let imageInPerson = await getImageInfo({
                imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                  index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
              });
              console.log(imageInPerson);
              if (imageInPerson.width > imageInPerson.height) {
                let scale = imageInPerson.width / imageInPerson.height;
                await ctx.value.drawImage(imageInPerson.path, 176, 148 + (113 - 89 / scale) / 2 +
                  index * 250, 89, 89 / scale);
              } else {
                let scale = imageInPerson.height / imageInPerson.width;
                await ctx.value.drawImage(imageInPerson.path, 176 + (89 - 113 / scale) / 2, 148 +
                  index * 250, 113 / scale, 113);
              }
            }
          }
        }
        if (data.desc == 'content' && data.sys_id != 2 && data.sys_id != 3) {
          // 分割字符转为数组
          let text = data.content.split('\n');
          let nextStart = 125;
          text.forEach(item => {
            nextStart = fillFeedText({
              text: item,
              x: 35,
              y: nextStart,
              maxWidth: 275,
              lineHeight: 23,
              color: '#000000',
              size: 13,
              isMax: false,
            });
          });
        }
        ctx.value.draw(true, async () => {
          let {
            fullurl,
          } = await saveImage();
          page.imageList.push(fullurl);
          await drawImage(index + 1);
        });
      } else {
        await createPdf();
      }
    }
  }

  function setFontSize(title) {
    if (title.length <= 4) {
      return 15;
    }
    return 10;
  }

  // 绘制背景
  async function drawBackground() {
    ctx.value.setFillStyle('#FFFFFF');
    ctx.value.fillRect(0, 0, 375, 667);
  }

  // 绘制线条
  async function drawLine(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.fillRect(x, y, width, height);
  }

  // 绘制矩形
  async function drawRect(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.fillRect(x, y, width, height);
  }

  // 绘制图片
  async function getImageInfo({
                                imgSrc,
                              }) {
    return new Promise((resolve, errs) => {
      uni.getImageInfo({
        src: imgSrc,
        success: function(image) {
          resolve(image);
        },
        fail(err) {
          errs(err);
        },
      });
    });
  }

  // 绘制矩形带有线条
  async function drawRoundRectPath(x, y, width, height, borderWidth, borderColor, fillColor) {
    ctx.value.lineWidth = borderWidth;
    ctx.value.fillStyle = fillColor;
    ctx.value.strokeStyle = borderColor;
    ctx.value.fillRect(x, y, width, height);
    ctx.value.strokeRect(x, y, width, height);
  }

  // 绘制文字竖向（正序）
  async function drawText(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, y + i * (Number(fontSize) + 2));
    }
  }

  // 绘制文字横向（正序）
  async function drawTextLandscapeOrientation(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    ctx.value.fillText(text, x, y);
  }

  // 绘制文字竖向（倒序）
  async function drawTextVertical(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    arr.reverse();
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, y - i * (Number(fontSize) + 2));
    }
  }

  // 绘制文字竖向（中间）
  async function drawTextCenter(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    let arr = text.split('');
    if (arr.length == 1) {
      await drawTextItem(arr[0], x, y + (256 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 2) {
      await drawTextItem(arr[0], x, y + (186 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (326 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 3) {
      await drawTextItem(arr[0], x, y + (126 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (256 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (386 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 4) {
      await drawTextItem(arr[0], x, y + (46 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (186 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (326 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (466 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 5) {
      await drawTextItem(arr[0], x, y + (6 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (136 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (256 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (386 / 2), color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (526 / 2), color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 6) {
      await drawTextItem(arr[0], x, y + (6 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (106 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (206 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (306 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (406 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (506 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 7) {
      await drawTextItem(arr[0], x, y + (6 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (86 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (166 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (246 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (326 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (406 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (486 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 8) {
      await drawTextItem(arr[0], x, y + (0 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (70 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (140 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (210 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (280 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (350 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (420 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (490 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 9) {
      await drawTextItem(arr[0], x, y + (0 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (65 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (130 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (195 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (260 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (325 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (390 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (455 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (520 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 10) {
      await drawTextItem(arr[0], x, y + (-20 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (40 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (100 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (160 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (220 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (280 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (340 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (400 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (460 / 2), color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (520 / 2), color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 11) {
      await drawTextItem(arr[0], x, y + (-20 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (30 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (80 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (130 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (180 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (230 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (280 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (330 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (380 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (430 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (480 / 2), color, 22, fontWeight, textAlign);
    } else if (arr.length == 12) {
      await drawTextItem(arr[0], x, y + (-30 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (20 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (70 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (120 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (170 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (220 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (270 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (320 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (370 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (420 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (470 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (520 / 2), color, 22, fontWeight, textAlign);
    } else if (arr.length == 13) {
      await drawTextItem(arr[0], x, y + (-50 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (-2 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (46 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (94 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (142 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (190 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (238 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (286 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (334 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (382 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (430 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (478 / 2), color, 22, fontWeight, textAlign);
      await drawTextItem(arr[12], x, y + (526 / 2), color, 22, fontWeight, textAlign);
    } else if (arr.length == 14) {
      await drawTextItem(arr[0], x, y + (-52 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (-8 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (36 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (80 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (124 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (168 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (212 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (256 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (300 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (344 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (388 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (432 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[12], x, y + (476 / 2), color, 20, fontWeight, textAlign);
      await drawTextItem(arr[13], x, y + (520 / 2), color, 20, fontWeight, textAlign);
    }
  }

  // 绘制每一项的文字
  async function drawTextItem(text, x, y, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    ctx.value.fillText(text, x, y);
  }

  // 绘制横向虚线
  async function drawHorizontalLine(x, y, width, height, color, lineWidth, dashLength, dashGap) {
    ctx.value.save();
    ctx.value.setLineDash([dashLength, dashGap], 5);
    ctx.value.setLineWidth(lineWidth);
    ctx.value.setStrokeStyle(color);
    ctx.value.strokeRect(x, y, width, height);
    ctx.value.restore();
  }

  // 绘制矩形圆角
  async function drawRectangle(x, y, width, height, color, radius) {
    ctx.value.save();
    ctx.value.setFillStyle(color);
    // 开始绘制圆角矩形
    ctx.value.beginPath();
    // 左上角圆弧
    ctx.value.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
    // 右上角圆弧
    ctx.value.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
    // 右下角圆弧
    ctx.value.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
    // 左下角圆弧
    ctx.value.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
    // 闭合路径
    ctx.value.closePath();
    // 填充颜色
    ctx.value.fill();
    // 绘制边框
    ctx.value.stroke();
    ctx.value.restore();
  }

  // 数组转换文字
  function number2Chinese(str) {
    let chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    let numStr = str.replace(/[^0-9]+/g, '');
    let year = chinese[numStr[0]] + chinese[numStr[1]] + chinese[numStr[2]] + chinese[numStr[3]];
    let month = numStr[4] === '0' ? chinese[numStr[5]] : chinese[10] + chinese[numStr[5]];
    let day = '';
    if (numStr[6] === '0') {
      day = chinese[numStr[7]];
    } else if (numStr[6] === '1') {
      if (numStr[7] === '0') {
        day = chinese[10];
      } else {
        day = chinese[10] + chinese[numStr[7]];
      }
    } else if (numStr[6] === '2' || numStr[6] === '3') {
      if (numStr[7] === '0') {
        day = chinese[numStr[6]] + chinese[10];
      } else {
        day = chinese[numStr[6]] + chinese[10] + chinese[numStr[7]];
      }
    }
    return year + '年' + month + '月' + day + '日';
  }

  // 获取文本的高度并竖向垂直居中
  async function drawTextHeight(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    let intermediateLine = height / 2 - (arr.length * fontSize / 2);
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, intermediateLine + y + i * (Number(fontSize) + 2));
    }
  }

  // 保存图片
  async function saveImage() {
    return new Promise(async (resolve, reject) => {
      setTimeout(async () => {
        await uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          width: 375,
          height: 667,
          destWidth: 375 * 4,
          destHeight: 667 * 4,
          success: async res => {
            // #ifdef H5
            resolve({
              fullurl: res.tempFilePath,
            });
            // #endif
            // #ifdef APP-PLUS
            let base64 = await pathToBase64(res.tempFilePath);
            resolve({
              fullurl: base64,
            });
            // #endif
            // #ifndef H5
            // uni.uploadFile({
            //   url: `${baseUrl}/api/common/uploadFile`,
            //   filePath: res.tempFilePath,
            //   fileType: 'image',
            //   name: 'pics',
            //   formData: {
            //     'file': 'pics',
            //   },
            //   header: {
            //     // #ifdef MP
            //     'Content-Type': 'multipart/form-data',
            //     // #endif
            //     ['token']: uni.getStorageSync('token'),
            //     'file': res.tempFilePath,
            //   },
            //   success: async (res) => {
            //     resolve(JSON.parse(res.data).data);
            //   },
            // });
            // #endif
          },
        });
      }, 100);
    });
  }

  // 绘制完成上传图片下载链接
  async function createPdf() {
    uni.hideLoading();
    uni.showLoading({
      title: '正在生成中...',
      mask: true,
    });
    // #ifdef H5
    const PDF = new jsPDF('p', 'cm', [22.225 * 2, 30.163 * 2], true);
    for (let i = 0; i < page.imageList.length; i++) {
      const url = page.imageList[i];
      // PDF.addImage(url, 'png', 1, 1, 375, 667);
      PDF.addImage(url, 'png', 1.111, -2.7075, 20.003, 35.578, '', 'FAST');
      PDF.addPage([22.225, 30.163], 'portrait');
    }
    // 删除最后一页留白
    const targetPage = PDF.internal.getNumberOfPages();
    PDF.deletePage(targetPage);
    PDF.deletePage(1);
    PDF.save('PDF存档.pdf');
    uni.hideLoading();
    // #endif

    // #ifdef MP-WEIXIN
    sheep.$helper.toast('请前往H5端进行导出');
    // #endif

    // #ifdef APP-PLUS
    uni.$emit('managePdf', page.imageList);
    // #endif
  }

  // 填充自动换行的文本
  function fillFeedText({
                          text,
                          x,
                          y,
                          maxWidth,
                          lineHeight,
                          color,
                          size,
                          maxLineNumber,
                          isMax,
                        }) {
    ctx.value.save();
    // 文本配置
    ctx.value.setFontSize(size);
    ctx.value.setFillStyle(color);
    ctx.value.lineWidth = 0.8; // 边框宽度

    // 计算文本换行宽高，换行逻辑
    const words = text.split('');
    let line = '';
    const lines = [];
    for (let i = 0; i < words.length; i++) {
      const word = words[i];
      const testLine = line + word;
      const metrics = ctx.value.measureText(testLine);
      if (metrics.width > maxWidth && i > 0) {
        lines.push(line);
        line = word;
      } else {
        line = testLine;
      }
    }
    ctx.value.setTextAlign('left');

    // 填充文本
    lines.push(line);
    let nextStart = 0;
    lines.forEach((line, index) => {
      if (isMax) {
        if (index <= maxLineNumber - 1) {
          if (index == maxLineNumber - 1) {
            let text = line.slice(0, -3) + '...';
            ctx.value.fillText(text, x, y + ((index++) * lineHeight), maxWidth);
            return nextStart = y + ((index++) * lineHeight);
          }
          ctx.value.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
          nextStart = y + ((index++) * lineHeight);
        }
      } else {
        ctx.value.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
        nextStart = y + ((index++) * lineHeight);
      }

    });
    ctx.value.restore();

    return nextStart;
  }
</script>


<style scoped lang="scss">
  .content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #A0A0A0;
  }

  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 510rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .gapbar {
    width: 702rpx;
    //min-height: 80rpx;
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;

    .left {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B;
    }
  }
</style>